<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>统战成员学习平台</title>
	<link rel="stylesheet" type="text/css" href="../../css/base.css" />
	<link rel="stylesheet" type="text/css" href="../../css/discovery.css" />
	<style>
		.no_more {
			text-align: center;
			color: #999;
			font-size: .65rem;
			padding: 1rem
		}
	</style>
</head>

<body>
	<div id='app' style="display:none" v-show="true" class="pr">
		<ul class="point_rule_list">
			<li class="ui_border_b" v-for="(item,index) in items">
				   <span class="act-name">{{item.operateName}}</span>
				   <span class="pts">分值+{{item.pointNum}}分 <span class="mark">长期有效</span> </span>
				   <span class="right">每日上限{{item.dayPointLimit}}分</span>
			</li>
			<div v-if="isLastPage" @click="toTop()" class="no_more" key="no_more">没有更多了，点击回到顶部</div>
				<transition name="fade">
					<spinner v-if="loading"></spinner>
				</transition>
		</ul>
		</div>
		<script type="text/javascript" src="../../script/api.js"></script>
		<script type="text/javascript" src="../../script/vue.min.js"></script>
		<script type="text/javascript" src="../../script/common.js"></script>
		<script type="text/javascript" src="../../script/layer_mobile/layer.js"></script>
		<script type="text/javascript">
			new Vue({
				el: '#app',
				data: {
					items: [],
					loading: false,
					pageNum: 1,
					pageSize: 50,
					isLastPage: false
				},
				mounted: function() {
					var $this = this;
					apiready = function() {
						api.parseTapmode();
						$this.init();

						onScrollToBottom(function () {
							if ($this.isLastPage) return;
							$this.getList()
						})

						api.setRefreshHeaderInfo({
							bgColor: '#f5f5f9',
							textColor: '#aaa',
							textDown: '下拉刷新...',
							textUp: '松开刷新...'
						}, function(ret, err) {
							$this.pageNum = 1;
							$this.isLastPage = false;
							$this.getList(true)
						});
					}
				},
				methods: {
					init: function() {
						var $this = this;
						$this.getList();
					},
					getList: function(refresh) {
						var $this = this;
						if ($this.loading) return;
						$this.loading = true;
						post('/client/point/pointRuleList', {
							'pageNum': $this.pageNum,
							'pageSize': $this.pageSize
						}, function(ret) {
							if (!ret.isSuccess) {
								msgUtil.toast({
									msg: ret.message
								});
								return;
							}
							if (refresh) {
								api.refreshHeaderLoadDone();
								$this.items = []
							}
							ret.data.list.forEach(function(item) {
								$this.items.push(item)
							});
							$this.loading = false;
							$this.pageNum++;
							if (ret.data.isLastPage) {
								$this.isLastPage = true;
								return;
							}
						});
					},
					toTop: function() {
						api.pageUp({
							'top': true
						}, function() {})
					}
				}
			});
		</script>
</body>

</html>
